<!DOCTYPE html>
<html lang="Zh-CN">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Majestic Admin</title>
  <!-- plugins:css -->
  <link rel="stylesheet" href="/static/vendors/mdi/css/materialdesignicons.min.css">
  <link rel="stylesheet" href="/static/vendors/base/vendor.bundle.base.css">
  <!-- endinject -->
  <!-- plugin css for this page -->
  <!-- End plugin css for this page -->
  <!-- inject:css -->
  <link rel="stylesheet" href="/static/css/style.css">
  <!-- endinject -->
  <link rel="shortcut icon" href="/static/images/favicon.png" />
</head>

<body>
  <div class="container-scroller">
    <div class="container-fluid page-body-wrapper full-page-wrapper">
      <div class="content-wrapper d-flex align-items-center auth px-0">
        <div class="row w-100 mx-0">
          <div class="col-lg-4 mx-auto">
            <div class="auth-form-light text-left py-5 px-4 px-sm-5">
              <div class="brand-logo">
                <img src="/static/images/logo.svg" alt="logo">
              </div>
              <h4>头回来？</h4>
              <h6 class="font-weight-light">好位置！这里正好是个注册的好地方。</h6>
              <form method="post" action="{% url 'login:create' %}">
                {% csrf_token %}
                <div class="form-group">
                  <input type="text" class="form-control form-control-lg" name="username" id="exampleInputUsername1" placeholder="给你的工号是多少？">
                </div>
                <div class="form-group">
                  <input type="text" class="form-control form-control-lg" name="name" id="exampleInputName" placeholder="你的名字？">
                </div>
                <div class="form-group">
                  <select class="form-control form-control-lg" name="depart" id="exampleFormControlSelect2">
                    <option name="noDepartment">哪个部门的？</option>
                    <option name="Warehouse">库存</option>
                    <option name="Sales">销售</option>
                    <option name="Procurement">采购</option>
                    <option>数据分析中心</option><!--有这个部门员工嘛 -->
                    <option>后台</option>
                  </select>
                </div>
                <div class="form-group">
                  <input type="password" class="form-control form-control-lg" name="pwd" id="exampleInputPassword1" placeholder="来设个密码吧">
                </div>
                <div class="mb-4">
                  <div class="form-check">
                    <label class="form-check-label text-muted">
                      <input type="checkbox" class="form-check-input" onclick="checkedOrNot(this);">
                      看过员工章程了吧，答应不？
                    </label>
                  </div>
                </div>
                <div class="mt-3">
                  <button class="btn btn-block btn-primary btn-lg font-weight-medium auth-form-btn" 
                  href="/static/index.html" id="SignInBtn" disabled>注册，并登录</button>
                </div>
                <div class="text-center mt-4 font-weight-light">
                  合着你有账号了是吧？ <a href="{% url 'login:login' %}" class="text-primary">那还不快登录</a>
                </div>
              </form>
              <p style="color:red">{{ rlt }}</p>
            </div>
          </div>
        </div>
      </div>
      <!-- content-wrapper ends -->
    </div>
    <!-- page-body-wrapper ends -->
  </div>
  <!-- container-scroller -->
  <!-- plugins:js -->
  <script src="/static/vendors/base/vendor.bundle.base.js"></script>
  <!-- endinject -->
  <!-- inject:js -->
  <script src="/static/js/off-canvas.js"></script>
  <script src="/static/js/hoverable-collapse.js"></script>
  <script src="/static/js/template.js"></script>
  <script>
    function checkedOrNot(checkbox){
        var btn = document.getElementById("SignInBtn");
        var choice = checkbox.checked;
        if (choice){
            btn.removeAttribute("disabled");
        }
        else{
            btn.setAttribute('disabled', true);
        }
    }
  </script>
  <!-- endinject -->
</body>

</html>
